<template>
	<div class="bg-white">
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-center justify-content-between">
				<span class="p-2 text-danhong text-lg">系统基本信息</span>
				<div class="mt-2">
					<Button class=" mr-3" @click="resetPassword()" type="primary">重置密码</Button>
					<Button @click="userSubmit()" type="primary">保存</Button>
				</div>
			</div>
			<div>
				<Row class="mt-2">
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">账号</span>
						<Input v-model="user.account" placeholder="请输入账户"></Input>
					</div>
					</Col>
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">电话</span>
						<Input v-model="user.tel" placeholder="请输入电话"></Input>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-center justify-content-between">
				<span class="p-2 text-danhong text-lg">员工基本信息</span>
				<div class="mt-2">
					<Button @click="empSubmit()" type="primary">保存</Button>
				</div>
			</div>
			<div>
				<Row class="mt-2">
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">姓名</span>
						<Input v-model="emp.name" placeholder="请输入姓名"></Input>
					</div>
					</Col>
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">状态</span>
						<Input v-model="emp.statu" disabled></Input>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		<div class="shadow  radius m-3 text-xs text-secondary" v-show="switchDept">
			<div class="p-2 border-bottom">
				<span class="p-2 text-danhong text-lg">部门信息</span>
			</div>
			<div class="mt-2">
				<Row class="mt-2">
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">部门</span>
						<div class="p-1">
							<Input v-model="dept.name" disabled />
						</div>
					</div>
					</Col>
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">职位</span>
						<div class="p-1">
							<Input v-model="job.name" disabled />
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom">
				<span class="p-2 text-danhong text-lg">请假记录</span>
			</div>
			<div>
				<!-- //请假记录 -->
				<!-- //遍历得到 -->
				<div class="mt-1 d-none d-xl-block">
					<Table border :columns="flows.columnInfo" :data="flows.data">
						<template slot-scope="{ row, index }" slot="action">
							<Button type="primary" size="small" class="mr-2"
								@click="showFlowDetail(row.flRId)">详细</Button>
						</template>
					</Table>
				</div>
				<!-- //缩小展示 -->
				<div class="mt-1 d-xl-none">
					<Row>
						<Col class="p-1" v-for="(user, index) in flows.data" :xs="24" :sm="24" :md="12" :lg="12">
						<div class="text-xss rounded shadow text-secondary p-1 bg-light">
							<div class="p-1 d-flex justify-content-between">
								<span>类型</span><span>{{user.name}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>申请时间</span><span>{{user.st}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>状态</span><span>{{user.statu}}</span>
							</div>
							<div class="p-1 d-flex justify-content-end">
								<Button class="text-xss ml-2" type="primary" size="small"
									@click="showFlowDetail(row.flRId)">详细</Button>
							</div>
						</div>
						</Col>
					</Row>
				</div>
				<div>
					<Page class="text-right mt-3 p-2" :page-size="flows.pageSize" @on-change="changeFlowsPage"
						:total="flows.total" />
				</div>
			</div>
		</div>
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2  border-bottom">
				<span class="p-2 text-danhong text-lg">考勤记录</span>
			</div>
		</div>
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom">
				<span class="p-2 text-danhong text-lg">曾经部门信息</span>
			</div>
			<div>
				<!-- //请假记录 -->
				<!-- //遍历得到 -->
				<div class="mt-1 d-none d-xl-block">
					<Table border :columns="depts.columnInfo" :data="depts.data"></Table>
				</div>
				<!-- //缩小展示 -->
				<div class="mt-1 d-xl-none">
					<Row>
						<Col class="p-1" v-for="(user, index) in depts.data" :xs="24" :sm="24" :md="12" :lg="12">
						<div class="text-xss rounded shadow text-secondary p-1 bg-light">
							<div class="p-1 d-flex justify-content-between">
								<span>部门名称</span><span>{{user.deptName}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>职位</span><span>{{user.jobName}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>入部时间</span><span>{{user.st}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>离开时间</span><span>{{user.et}}</span>
							</div>
							<div class="p-1 d-flex justify-content-between">
								<span>当前状态</span><span>{{user.aFlg}}</span>
							</div>
						</div>
						</Col>
					</Row>
				</div>
				<div>
					<Page class="text-right mt-3 p-2" :page-size="depts.pageSize" @on-change="changeDeptsPage"
						:total="depts.total" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				emp: {
					empId: '',
					name: '',
					statu: '',
				},
				user: {
					userId: '',
					account: '',
					tel: '',
				},
				empDept: {},
				dept: {
					name: '',
				},
				job: {
					name: '',
				},
				flows: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "序号",
							type: 'index',
							width: 100,
							align: 'center',
						},
						{
							title: "类型",
							key: "name",
							width: 150
						},
						{
							title: "开始时间",
							key: "st",
						},
						{
							title: "结束时间",
							key: "et",
						},
						{
							title: "状态",
							key: "statu",
							width: 150
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				},
				//部门列表
				depts: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "序号",
							type: 'index',
							width: 100,
							align: 'center',
						},
						{
							title: "部门名称",
							key: "deptName",
							width: 150
						},
						{
							title: "职位",
							key: "jobName",
							width: 150
						},
						{
							title: "入部时间",
							key: "st",
						},
						{
							title: "离开时间",
							key: "et",
							width: 150
						},
						{
							title: "当前状态",
							key: "aFlg",
							width: 150
						}
					],
					data: []
				},
				switchDept: '',
			}
		},
		created: function() {
			this.init()
		},
		methods: {
			init: function() {
				//接值
				this.$data.emp.empId = this.$route.query.empId;
				this.flows.currentPage = 0,
					this.depts.currentPage = 0,
					this.getFlowsPage(),
					this.getDeptsPage(),
					this.getEmp()
			},
			getEmp: function() {
				this.http.get({
					url: "/emp/info",
					param: {
						empId: this.emp.empId
					}
				}).then(res => {
					var oldStatuArr = [res.emp];
					var newStatuArr = [];
					oldStatuArr.map((item) => {
						if (item.statu == 'CHA') {
							item.statu = '产出中'
						} else if (item.statu == 'NDP') {
							item.statu = '无部门'
						} else if (item.statu == 'BCH') {
							item.statu = '空闲'
						} else if (item.statu == 'WAK') {
							item.statu = '休假中'
						} else if (item.statu == 'LEV') {
							item.statu = '离职中'
						} else if (item.statu == 'OUT') {
							item.statu = '已离职'
						}
						newStatuArr.push(item)
					})
					this.user = res.user,
					this.empDept = res.empDept,
					this.emp = newStatuArr[0];
					if (null == this.empDept.deptId || '' == this.empDept.deptId) {
						this.switchDept = false;
					} else {
						this.http.get({
							url: "/dept/info",
							param: {
								deptId: this.empDept.deptId
							}
						}).then(re => {
							if (null == re.deptId || '' == re.deptId) {
								this.switchDept = false;
							} else {
								this.switchDept = true;
								this.dept.name = re.name
								this.http.get({
									url: "/dept/job/info",
									param: {
										jobId: this.empDept.jobId
									}
								}).then(r => {
									this.job.name = r.name
								});
							}
						});
					}
				});
			},
			//获取请假信息
			getFlowsPage: function() {
				this.http.get({
					url: "/emp/flow/record/page",
					param: {
						empId: this.emp.empId,
						current: this.flows.currentPage
					}
				}).then(res => {
					var oldStatuArr = [];
					var newStatuArr = [];
					oldStatuArr = res.records;
					oldStatuArr.map((item) => {
						if (item.statu == 'R') {
							item.statu = '已申请'
						} else if (item.statu == 'P') {
							item.statu = '进行中'
						} else if (item.statu == 'F') {
							item.statu = '已完成;'
						}
						newStatuArr.push(item)
					})
					this.flows.data = newStatuArr;
					this.flows.currentPage = res.current;
					this.flows.total = res.total;
					this.flows.pageSize = res.pages;
				});
			},
			changeFlowsPage: function(changedPage) {
				this.flows.currentPage = changedPage;
				this.getFlowsPage();
			},
			//请假详细
			showFlowDetail: function(flRId) {
				this.$router.detail.open({
					name: "leave_detail",
					params: {
						flRId: flRId
					}
				});
			},
			//获取曾经所在部门
			getDeptsPage: function() {
				this.http.get({
					url: "/emp/dept/page",
					param: {
						empId: this.emp.empId,
						current: this.depts.currentPage,
						size: 10
					}
				}).then(res => {
					var oldStatuArr = [];
					var newStatuArr = [];
					oldStatuArr = res.records;
					oldStatuArr.map((item) => {
						if (item.aFlg) {
							item.aFlg = '生效'
						} else {
							item.aFlg = '已离开'
						}
						newStatuArr.push(item)
					})
					this.depts.currentPage = res.current;
					this.depts.total = res.total;
					this.depts.pageSize = res.pages;
					this.depts.data = newStatuArr

				});
			},
			changeDeptsPage: function(changedPage) {
				this.depts.currentPage = changedPage;
				this.getDeptsPage();
			},
			//保存信息
			userSubmit: function() {
				var accountTest = /^[a-zA-Z0-9_-]{4,16}$/;
				var telTest = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.user.account == "" || this.user.account == null) {
					this.message.error("请输入账户名");
					return;
				}
				if (!accountTest.test(this.user.account)) {
					this.message.error("账户名格式错误");
					return;
				}
				if (this.user.tel == "") {
					this.message.error("请输入手机号");
					return;
				}
				if (!telTest.test(this.user.tel)) {
					this.message.error("手机号格式错误");
					return;
				}
				this.message.confirm({
					title: "修改提示",
					content: "即将修改员工系统基本信息，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/emp/info",
							param: {
								user: JSON.stringify(this.user),
								emp: JSON.stringify(this.emp),
								empDept: ""
							}
						}).then(res => {
							this.message.info("保存成功");
							this.getEmp()
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
						this.getEmp()
					}
				});
			},
			empSubmit: function() {
				if (this.emp.name == "" || this.emp.name == null) {
					this.message.error("请输入姓名");
					return;
				}
				this.message.confirm({
					title: "修改提示",
					content: "即将修改员工基本信息，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/emp/info",
							param: {
								user: JSON.stringify(this.user),
								emp: JSON.stringify(this.emp),
								empDept: ''
							}
						}).then(res => {
							this.message.info("保存成功");
							this.getEmp()
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
						this.getEmp()
					}
				});
			},
			//重置密码
			resetPassword: function() {
				this.message.confirm({
					title: "重置提示",
					content: "即将重置密码，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/emp/info",
							param: {
								user: JSON.stringify(this.user),
								emp: JSON.stringify(this.emp),
								empDept: ''
							}
						}).then(res => {
							this.message.info("重置成功");
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		}
	}
</script>


<style>

</style>